今天要繼續來分享CSS position當中的absolute
這一個是我覺得最難理解的CSS position

absolute(絕對的）

當設定position為absolute時，元素此時就脫離了他最原本元素的規則
有了自己的空間(離家出走的概念嗎...)
搭配right、left、top、bottom設定的位置，是參考網頁最外層的視窗
舉例底下有三個box，我在第二個box加上position: absolute;

.box1 {
        background-color: lawngreen;
      }
.box2 {
        background-color: aqua;
        position: absolute;
      }
.box3 {
        background-color: yellow;
      }

結果發現...box3失蹤了... 到底去哪了???

讓我們在box2 加上top:0;right:0;
結果發現，box3回來了，box2出現在網頁最右上角

原因就是box2被設定為position: absolute;，就跳脫出原本的div
當box2跳脫之後，box3馬上就取代了他的位置....(所以box3其實是在box2底下）
因此當我們在box2加上top:0;right:0;
box2就會以網頁最外層視為它參考對象來移動它的位置了

.box2 {
background-color: aqua;
position: absolute;
top:0; right:0;
}

但如果想要讓box2至少保留在黑色區塊中呢
只要在黑色區塊加上position: relative;這樣box2就會把它視為依附對象
依照黑色區塊的位置來定位

div.container {
        width: 500px;
        height: 2000px;
        background-color: black;
        position: relative;
      }
.box1 {
        background-color: lawngreen;
      }
.box2 {
        background-color: aqua;
        position: absolute;
      }
.box3 {
        background-color: yellow;
      }